<template>
    <view class="recruit_box">
        <view class="top"></view>
        <view class="nav_box">
            <view class="nav">
                <view class="font_info">我参加的:</view>
                <select class="select" :class="{active:current===0}" @click="getToken()">
                    <option selected>全部</option>
                    <option>最近</option>
             
                </select>
            </view>
            <view class="nav">
                <view class="font_info">我发布的:</view>
                <select class="select" :class="{active:current===1}" @click="getToken1()">
                    <option selected>全部</option>
                </select>
            </view>
        </view>
        <view class="con_box" v-if="flag">
            <view class="single_box" v-for="(item,index) in joinData" :key="item.dynamicId">
                <view class=info_box>
                    <view class="recruit_title_box">
                        <view class="recruit_title_ava">
                            <image :src="item.userRecruitVo.userHeaderImage" mode="widthFix"></image>
                        </view>
                        <view class="recruit_middle_box">
                            <view class="recruit_title_info">
                                <text class="recruit_title">{{item.userRecruitVo.userNickname}}</text>
                                <text class="recruit_price">¥{{item.recruit.recruitPrice}}／人</text>
                            </view>
                            <text class="recruit_company">官方认证：{{item.authenticationRecruitVo.authenticationSponsorName}}</text>
                        </view>
                    </view>
                    <view class="recruit_desc">
                        <view>
                            <text class="recruit_acter">{{item.recruit.recruitClass}}</text>
                            <text class="recruit_cos">{{item.recruit.recruitName}}</text>
                        </view>

                        <text class="recruit_ing">正在进行中...</text>
                    </view>
                </view>
                <view class="recruit_swiper_box">
                    <image :src="item.recruit.recruitImage" mode="widthFix"></image>
                </view>
                <view class="other_info_box">
                    <view class="other_info">
                        <text class="quota">2人参与，剩14个名额</text>
                        <text class="quota">1天前</text>
                    </view>
                    <image src="/static/icon/img_icon18.png@2x.png" mode="widthFix"></image>
                </view>
            </view>

        </view>
        <view class="con_box" v-else="flag">
            <view class="single_box" v-for="(item,index) in releaseData" :key="item.recruit.recruitId">
                <view class=info_box>
                    <view class="recruit_title_box">
                        <view class="recruit_title_ava">
                            <image :src="item.userRecruitVo.userHeaderImage" mode="widthFix"></image>
                        </view>
                        <view class="recruit_middle_box">
                            <view class="recruit_title_info">
                                <text class="recruit_title">{{item.userRecruitVo.userNickname}}</text>
                                <text class="recruit_price">¥{{item.recruit.recruitPrice}}／人</text>
                            </view>
                            <text class="recruit_company">官方认证：{{item.authenticationRecruitVo.authenticationSponsorName}}</text>
                        </view>
                    </view>
                    <view class="recruit_desc">
                        <view>
                            <text class="recruit_acter">{{item.recruit.recruitClass}}</text>
                            <text class="recruit_cos">{{item.recruit.recruitName}}</text>
                        </view>

                        <text class="recruit_ing">正在进行中...</text>
                    </view>
                </view>
                <view class="recruit_swiper_box">
                    <image :src="item.recruit.recruitImage" mode="heightFix"></image>
                </view>
                <view class="other_info_box">
                    <view class="other_info">
                        <text class="quota">2人参与，剩14个名额</text>
                        <text class="quota">1天前</text>
                    </view>
                    <image src="/static/icon/img_icon18.png@2x.png" mode="widthFix"></image>
                </view>
            </view>

        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                flag: true,
                current: 0,
                sexIconSrc: {
                    "男": "/static/icon/img_icon19.png@2x.png",
                    "女": "/static/icon/img_icon20.png@2x.png"
                },
                joinData: [],
                releaseData: []
            }
        },
        methods: {
            //获取token
            getToken() {
                this.current = 0,
                    this.flag = true,
                    uni.getStorage({
                        key: 'token',
                        success: res => {
                            console.log(res.data)
                            let token = res.data
                            //运行参加招募数据函数
                            this.getJoinData(token)
                        }
                    })
            },
            //请求我参加的招募数据
            getJoinData(token) {
                this.$request('/comic-time/personal/mysign', {
                    "pageNo": 1,
                    "pageTol": 5
                }, 'GET', {
                    'Authorization': token,
                }).then(res => {
                    console.log("参加")
                    console.log(res)
                    this.joinData = res.data
                });
            },
            //获取token
            getToken1() {
                this.flag = false,
                    this.current = 1,
                    uni.getStorage({
                        key: 'token',
                        success: res => {
                            console.log(res.data)
                            let token = res.data
                            //运行参加招募数据函数
                            this.getReleaseData(token)
                        }
                    })
            },
            //请求我发布的招募数据
            getReleaseData(token) {
                this.$request('/comic-time/personal/myrecruit', {
                    "pageNo": 1,
                    "pageTol": 5
                }, 'GET', {
                    'Authorization': token,
                }).then(res => {
                    console.log("发布")
                    console.log(res)
                    this.releaseData = res.data
                });
            }
        },
        mounted() {
            this.getToken()
        }
    }
</script>

<style lang="scss" scoped>
    $hign:calc(100vh - 44px);

    .active {
        color: #ff6262 !important;
    }

    .recruit_box {
        box-sizing: border-box;
        width: 750rpx;
        height: $hign;
        background-color: #eeeeee;

        .top {
            width: 750rpx;
            height: 10rpx;
            background-color: #eeeeee;
        }

        .nav_box {
            width: 750rpx;
            height: 70rpx;
            background-color: #ffffff;
            border-bottom: 1rpx solid #e5e5e5;
            box-sizing: border-box;
            padding: 0 20rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .nav {
                width: 245rpx;
                height: 40rpx;
                display: flex;
                justify-content: space-between;
                align-items: baseline;

                .font_info {
                    width: 145rpx;
                    height: 40rpx;
                    font-family: SourceHanSansCN-Regular;
                    font-size: 32rpx;
                    line-height: 40rpx;
                    color: #333333;
                }

                .select {
                    // width:100rpx;
                    height: 40rpx;
                    text-align:center;
                    line-height: 40rpx;
                    font-size: 32rpx;
                    border: none;
                    color: #333333;
                    outline: medium;
                    align-self:baseline;
                    background-color:#fff;

                    option {
                        height: 40rpx;
                        line-height: 40rpx;
                        text-align:center;
                        font-size: 32rpx;
                        outline: medium;
                        color: #333333;
                    }
                }


            }
        }

        .con_box {
            width: 750rpx;

            .single_box {
                width: 750rpx;
                // height: 700rpx;
                box-sizing: border-box;
                padding: 20rpx 20rpx 0 20rpx;
                margin-bottom: 10rpx;
                background-color: #ffffff;

                .info_box {
                    width: 100%;
                    height: 140rpx;
                    // background-color: #000;

                    .recruit_title_box {
                        width: 100%;
                        height: 73rpx;
                        display: flex;
                        margin-bottom: 22rpx;

                        .recruit_title_ava {
                            width: 73rpx;
                            height: 73rpx;
                            border-radius: 50%;
                            margin-right: 10rpx;
                            overflow: hidden;

                            image {
                                width: 73rpx;

                            }
                        }

                        .recruit_middle_box {
                            height: 73rpx;
                            flex-grow: 5;

                            .recruit_title_info {
                                display: flex;
                                justify-content: space-between;
                                align-items: center;

                                .recruit_title {
                                    font-family: PingFangSC-Regular;
                                    font-size: 28rpx;
                                    line-height: 33rpx;
                                    color: #000000;
                                }

                                .recruit_price {
                                    font-family: PingFangSC-Semibold;
                                    font-size: 30rpx;
                                    line-height: 33rpx;
                                    color: #ff6262;
                                }
                            }

                            .recruit_company {
                                width: 100%;
                                height: 31rpx;
                                font-family: PingFangSC-Light;
                                font-size: 20rpx;
                                line-height: 31rpx;
                                color: #666666;
                            }
                        }
                    }

                    .recruit_desc {
                        width: 100%;
                        height: 31rpx;
                        display: flex;
                        justify-content: space-between;

                        .recruit_acter {
                            font-size: 32rpx;
                            line-height: 31rpx;
                            margin-right: 20rpx;
                            color: #fead38;
                        }

                        .recruit_cos {
                            font-family: PingFangSC-Light;
                            font-size: 32rpx;
                            line-height: 30rpx;
                            color: #333333;
                            // margin-right: 80rpx;
                        }

                        .recruit_ing {
                            font-family: SourceHanSansCN-Regular;
                            font-size: 26rpx;
                            line-height: 31rpx;
                            color: #666666;
                        }
                    }
                }

                .recruit_swiper_box {
                    width: 100%;
                    height: 467rpx;
                    margin-bottom: 20rpx;
                    border-radius: 8rpx;

                    image {
                        width: 100%;
                        height: 467rpx;
                    }
                }

                .other_info_box {
                    // width: 100%;
                    height: 73rpx;

                    display: flex;
                    justify-content: space-between;
                    align-content: flex-start;

                    .other_info {
                        width: 250rpx;
                        height: 73rpx;
                        display: flex;
                        flex-wrap: wrap;
                        align-content: flex-start;

                        .quota {
                            height: 23rpx;
                            display: block;
                            font-family: PingFangSC-Regular;
                            font-size: 22rpx;
                            line-height: 23rpx;
                            margin-bottom: 10rpx;
                            color: #666666;
                        }
                    }

                    image {
                        width: 137rpx;
                        height: 44rpx;
                        background-color: #ff6262;
                        border-radius: 20rpx;
                    }
                }

            }
        }
    }
</style>
